<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* .box1 {
        background-color: skyblue;
        float: left;
      }
      .box2 {
        background-color: springgreen;
        float: left;
      } */
      .one {
        background-color: orange;
        float: left;
      }
      .two {
        background-color: red;
        float: right;
      }
      /*
        元素浮动以后脱离文档流，块元素不在独占一行

        脱离文档流特点
          块元素：
            1.块元素不再独占一行
            2.脱离文档流以后，块元素的宽高默认被内容撑开
          行内元素：
            行内元素脱离文档流以后会变成块元素，特点和块元素一样
          脱离文档流以后，不需要在区分块和行内了
      */
    </style>
  </head>
  <body>
    <div class="box1">sadsadsadassda</div>
    <div class="box2">swkonjhuhjhuh</div>
    <br />
    <span class="one">sadsadadsa</span>
    <span class="two">lpkmknjcbn</span>
  </body>
</html>
